<template>
  <div>
    <!-- 外层容器 -->
    <el-container>
      <!-- 上半区域：顶栏 -->
      <el-header class="layout-header">
        <!-- 顶栏的标题文字 -->
        <h1>试卷出题平台</h1>
      </el-header>
      <!-- 下半区域 -->
      <el-container class="layout-body">
        <!-- 下半区域的左侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
              router
              @select="handleSelect"
              default-active="/index"
              class="el-menu-vertical-demo"
              background-color="#3a4856"
              text-color="#fff"
              align="left"
              active-text-color="#fff">
            <!-- 主页 -->
            <el-menu-item  index="/index">
              <i class="el-icon-s-home"></i>
              <span>主页</span>
            </el-menu-item>
            <!-- 内容管理 -->
            <el-menu-item index="/topic">
              <i class="el-icon-s-order"></i>
              <span slot="title">出题</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 下半区域的右侧主体 -->
        <el-main class="layout-main">
          <!-- 主要内容 -->
          <router-view/>
          <!-- 版权信息 -->
<!--          <div class="copyright" style="position: absolute;bottom: 0;left: 500px">-->
<!--            <p>后台管理系统  |  Copyright &copy; 2023</p>-->
<!--          </div>-->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return {
    };
  },
  mounted() {

  },
  methods: {}
}
</script>

<style >
.container {
  box-sizing: border-box;
  width: 100%;
  height: 617px;
  background-image: url("../assets/css/home.png");
  background-position: center center;
  background-size: 1103px 617px;
  background-repeat: no-repeat;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 7px;
  color: #2F324D;
  margin-top: 100px;
}
body {
  margin: 0;
}

.layout-header {
  background: #28292e;
}

.layout-header .login-user {
  float: right;
  //margin-top: 12px;
  display: flex;
}

.layout-header .login-user .welcome {
  line-height: 36px;
  color: #fff;
  //margin-right: 10px;
}

.layout-header h1 {
  float: left;
  margin: 0;
  color: #fff;
  line-height: 60px;
  font-size: 20px;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  background: #3a4856;
  width: 160px !important;
}

.layout-aside .el-menu {
  border: 0;
}

.layout-aside i {
  color: #fff !important;
}

.layout-main {
  background: #f2f4f9;
}

.layout-main .body {
  background: #fff;
  padding: 30px;
}

.layout-main .copyright {
  width: 600px;
  margin: 0 auto;
  padding: 10px;
}

.layout-main .copyright p {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 12px;
  color: #9e9e9f;
}

.el-menu-item.is-active {
  background: #405872 !important;
}
.container1 {
  box-sizing: border-box;
  width: 94%;
  height: 98%;
  background-image: linear-gradient(to bottom, transparent, white), url("../assets/css/bc.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 7px;
  color: #2F324D;
  backdrop-filter: blur(10px); /* 根据需要调整模糊程度 */
  margin:  25px;

}
.text {
  font-size: 50px;
}

.item {
  padding: 18px 0;
}

.box-card {


  border-radius: 10px;
  text-align: left;
}
.hoverable {

  position: relative;
  cursor: pointer;
}

.hoverable .el-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
  opacity: 0;
}

.hoverable:hover .el-button {
  opacity: 1;
}

</style>
